// 1.页面一加载渲染数据
function initScore() {
  axios({
    url: "/score/list",
    method: "get",
  }).then(({ data: res }) => {
    //成功回调
    console.log(res);
    // 判断
    if (res.code == 0) {
      // 渲染 res.data  是对象类型数据， 属性是id
      //   值是对象(name和score)
      // 定义数组
      let arr = [];
      for (let k in res.data) {
        // k 代表属性  res.data[k] 代表属性值 里边包含 (name和score)
        // score是数组,用下标获取数组的每一个成绩
        arr.push(`
        <tr>
          <th scope="row">${k}</th>
          <td>${res.data[k].name}</td>
          <td data-id="${k}" index="1" class="score">${res.data[k].score[0]}</td>
          <td data-id="${k}" index="2" class="score">${res.data[k].score[1]}</td>
          <td data-id="${k}" index="3" class="score">${res.data[k].score[2]}</td>
          <td data-id="${k}" index="4" class="score">${res.data[k].score[3]}</td>
          <td data-id="${k}" index="5" class="score">${res.data[k].score[4]}</td>
        </tr>
        `);
      }
      // for循环外边进行赋值
      tbody.innerHTML = arr.join("");
    }
  });
}
let tbody = document.querySelector("tbody");
initScore();

// 2.修改学生成绩
//  2.1 点击 td.score , 向内部添加 input 事件  - 事件代理
tbody.addEventListener("click", function (e) {
  // 判断是否是  .score类名叫这个的  td 标签
  if (!e.target.classList.contains("score")) return;
  if (!/^\d{1,3}$/.test(e.target.innerHTML) && e.target.innerHTML != "") return;
  // 获取td 的innerHTML 属性值
  let num = e.target.innerHTML;
  // 向 td中添加input 两种方法  A 和 B
  // // A . innerHTML 属性  赋值
  // e.target.innerHTML='<input type="text">'
  // let input = e.target.children[0]
  // input.value=num   //用原来的 td  的innerHTML 属性值 为input赋值
  // input.focus()      // focus()可以触发focus 事件， focus事件默认行为就是主动获取光标

  // B  this.appendChild  添加 li 标签
  // 创建一个input ， 方便后面绑定事件
  let input = document.createElement("input");
  input.value = num;
  // 清空td 的所有内容，然后添加新的input
  e.target.innerHTML = "";
  e.target.appendChild(input);
  input.focus(); // focus事件默认行为就是主动获取光标

  // 2.2 失去焦点恢复原值
  input.onblur = function () {
    e.target.innerHTML = num;
  };

  // 2.3 回车保存成绩

  input.addEventListener("keydown", function (ev) {
    if (ev.key != "Enter") return;
    axios({
      url: "/score/entry",
      method: "post",
      data: {
        // this 就是input， 它的父盒子是td 属性都绑定到td 上
        stu_id: e.target.getAttribute("data-id"), // 学员id
        batch: e.target.getAttribute("index"), // 第几次成绩
        score: ev.target.value, //成绩
      },
    }).then(({ data: res }) => {
      //成功回调
      console.log(res);
      if (res.code == 0) {
        toastr.success("恭喜您，修改成功");
        initScore();
      }
    });
  });
});
